<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body id="body1">
    <ul id="list">
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
        <li>555555</li>
    </ul>
</body>

</html>
<script>
    //一.节点的高级选取
    //1.高级选取：第一个子节点，最后一个子节点，上一个兄弟节点，下一个兄弟节点(包含空白和不包含空白等分成8个属性)
    //firstChild:第一个子节点(包含空白)
    //firstElementChild:第一个子节点(不包含包含空白)
    //lastChild:最后一个子节点(包含空白)
    //lastElementChild:最后一个子节点(不包含包含空白)

    // var list = document.querySelector('#list');
    // console.log(list.childNodes[1].childNodes[0].nodeValue); //111111
    // 解释：获取第二个子节点li，然后第二个子节点又包含一个文本节点，获取这个文本节点的值。

    // console.log(list.firstChild); //#text
    // console.log(list.lastChild); //#test
    // console.log(list.firstElementChild); //<li>111111</li>
    // console.log(list.lastElementChild); //<li>555555</li>


    // 兄弟节点
    // previousSibling:上一个兄弟节点(包含包含空白)
    // previousElementSibling: 上一个兄弟节点(不包含包含空白)
    // nextSibling:下一个兄弟节点(包含包含空白)
    // nextElementSibling: 下一个兄弟节点(不包含包含空白)

    // console.log(list.firstElementChild.nextElementSibling); //第一个元素节点的下一个兄弟节点 <li>222222</li>
    // console.log(list.firstElementChild.nextElementSibling.previousElementSibling); //<li>111111</li>
    // console.log(list.firstElementChild.nextElementSibling.nextElementSibling); //<li>333333</li>


    // 二.基本控制结构元素的获取。
    // document.querySelector('body') //一般
    // document.querySelector('#body1')//很不好

    // document.body //最优
    // document  获取document对象
    // document.documentElement 获取的html标签元素
    // document.title 获取title标题元素

    // parentNode 获取当前节点的父节点,链式操作:element.parentNode.parentNode.parentNode....
    // var list = document.querySelector('#list');
    // console.log(list.parentNode); //body
    // console.log(list.parentNode.parentNode); //html
    // console.log(list.parentNode.parentNode.parentNode); //document
    // console.log(list.parentNode.parentNode.parentNode.parentNode); //null
</script>